<script setup>
// import { ElMessage } from 'element-plus'
import { tableOptions } from './config'
import { validate } from './validate'
const value1 = ref(false)
let tableData = reactive({
  table1: [
    {
      id: 1,
      date: '2016-05-03',
      name: 'Tom1',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 2,
      date: '2016-05-02',
      name: 'Tom2',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 3,
      date: '2016-05-04',
      name: 'Tom3',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 4,
      date: '2016-05-01',
      name: 'Tom4',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ],
  table2: [
    {
      id: 1,
      name2: 'Tom1',
      age2: '16',
      sex2: '男',
    },
    {
      id: 2,
      name2: 'Tom2',
      age2: '13',
      sex2: '女',
    },
    {
      id: 3,
      name2: 'Tom3',
      age2: '18',
      sex2: '男',
    },
    {
      id: 4,
      name2: 'Tom4',
      age2: '26',
      sex2: '女',
    },
  ],
  table3: [
    {
      id: 1,
      date: '2016-05-03',
      age: 11,
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 2,
      date: '2016-05-02',
      age: 12,
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 3,
      date: '2016-05-04',
      age: 13,
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 4,
      date: '2016-05-01',
      age: 14,
      address: 'No. 189, Grove St, Los Angeles',
    },
  ],
})

let finArr = {}
let rules = {}
const add = (key) => {
  let obj = {}
  if (!tableData[key]) {
    tableData[key] = []
  }
  if (!finArr[key]) {
    finArr[key] = []
  }
  tableOptions[key].tableColumn.forEach((item) => {
    obj[item.name] = item[item.name]
    rules[item.key] = validate(item.validate)
  })
  finArr[key].push(obj)
  tableData[key].push(obj)
}
const formRefs = ref([])
const handle = () => {
  let isAllValid = true
  const promises = formRefs.value.map((form, index) => {
    return new Promise((resolve) => {
      form.validate((valid) => {
        if (!valid) {
          isAllValid = false
        }
        resolve(valid)
      })
    })
  })
  // 等待所有表单校验完成
  Promise.all(promises).then((results) => {
    isAllValid = results.every((valid) => valid)
    if (isAllValid) {
      console.log('所有的校验成功')
      // 提交所有表单数据的逻辑,这里可以发送异步请求了
      // 初始化
      finArr = {}
      tableData = newTableData
    } else {
      console.error('校验不成功')
      ElMessage.error('表单校验不成功')
    }
  })
}

const newTableData = JSON.parse(JSON.stringify(tableData))
const changeHandle = (e) => {
  // console.log(e, 3333)
  if (!e) {
    finArr = {}
    tableData = newTableData // 模拟数据，应该是发送请求重新获取
  }
}
</script>
<template>
  <div>
    <el-switch v-model="value1" @change="changeHandle" />
    <!-- <el-button type="primary" v-if="value1" @click="add">添加</el-button> -->
  </div>
  <template v-for="(item1, key1) in tableOptions" :key="item1.name">
    <h1>
      {{ item1.tableName }}
      <el-button
        type="primary"
        v-if="value1 && item1.addShow"
        @click="add(key1)"
        >添加</el-button
      >
    </h1>

    <el-table
      max-height="250"
      border
      :data="tableData[key1]"
      style="width: 100%"
      stripe 
    >
      <el-table-column
        align="center"
        :label="item2.label"
        :prop="item2.key"
        v-for="(item2, index2) in item1.tableColumn"
        :key="index2"
        show-overflow-tooltip
      >
        <template #default="scope">
          <template v-if="scope.row.id"> {{ scope.row[item2.key] }}</template>
          <el-form
            v-else
            :model="scope.row"
            :rules="rules"
            label-width="auto"
            style="max-width: 600px"
            ref="formRefs"
          >
            <el-form-item :prop="item2.key" v-if="item2.type == 'select'">
              <el-select
                v-model="scope.row[item2.key]"
                placeholder="Select"
                style="width: 240px"
              >
                <el-option
                  v-for="(item3, index3) in item2.selectOption"
                  :key="index3"
                  :label="item3.label"
                  :value="item3.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :prop="item2.key" v-else>
              <el-input
                v-model="scope.row[item2.key]"
                style="width: 240px"
                placeholder="Please input"
              />
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </template>

  <el-button type="primary" @click="handle">配置下发</el-button>
</template>
